<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myCanvas').getContext('2d');
// 设置阴影。
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
ctx.shadowBlur = 2;  
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
// 绘制矩形。
ctx.fillStyle = "#33ccff";
ctx.fillRect(20,20,300,60);
ctx.fill();
// 绘制文本。
ctx.font = "45px 黑体";
ctx.fillStyle = "white";
ctx.fillText("HTML5+CSS3",30, 64);

</script>
</body>
</html>  
